{% extends 'login.html' %}

{% block title %}Register{% endblock title %}

{% block auth_form %}
<form action="" method="post" style="margin-top: 40%;" class="box">
    <div class=" has-text-centered mb-3">
        <p class=" subtitle">Register</p>
        <h1 class="title">FFTD</h1>
    </div>
    
     <!-- 消息闪现 -->
     {% with messages = get_flashed_messages() %}
     <b-message type="is-danger">
       {% if messages %}
         <ul class=flashes>
         {% for message in messages %}
             <li>{{ message }}</li>
         {% endfor %}
         </ul>
     {% endif %}
     </b-message>
     {% endwith %}

     <!-- 表单验证 -->
     {% if form.username.errors %}
     <b-message type="is-danger">
       <ul class="errors">
         {% for error in form.username.errors %}
         <li>{{ error }}</li>
         {% endfor %}
       </ul>
     </b-message>
     {% endif %}
     {{ form.csrf_token }}
    <div class="field">
        <p class="control has-icons-left has-icons-right">
            <!-- 用户名 -->
            {{ form.username(class='input', placeholder='Username') }}
            <span class="icon is-small is-left">
                <i class="fas fa-envelope"></i>
            </span>
            <span class="icon is-small is-right">
                <i class="fas fa-check"></i>
            </span>
        </p>
    </div>
    <div class="field">
        <p class="control has-icons-left has-icons-right">
            <!-- 邮箱 -->
            {{ form.email(class='input', placeholder='email') }}
            <span class="icon is-small is-left">
                <i class="fas fa-envelope"></i>
            </span>
            {% if form.email.errors %}
                <span class="icon is-small is-right has-text-danger">
                    <i class="fas fa-exclamation-triangle"></i>
                </span>
            {% else %}
                <span class="icon is-small is-right">
                    <i class="fas fa-check"></i>
                </span>
            {% endif %}
        </p>
        <!-- 显示邮箱字段的错误消息 -->
        {% for error in form.email.errors %}
            <p class="help is-danger">{{ error }}</p>
        {% endfor %}
    </div>
    <div class="field">
        <p class="control has-icons-left">
            <!-- 密码 -->
            {{ form.password(class='input', placeholder='Password') }}
            <span class="icon is-small is-left">
                <i class="fas fa-lock"></i>
            </span>
        </p>
    </div>
    <div class="field">
        <p class="control has-icons-left">
            <!-- 再次输入密码 -->
            {{ form.password1(class='input', placeholder='Password1') }}
            <span class="icon is-small is-left">
                <i class="fas fa-lock"></i>
            </span>
        </p>
    </div>
    <div class="field">
        <p class="control">
            <!-- 提交 -->
            <input class="button is-success is-fullwidth" type="submit" value="Register">
        </p>
    </div>
</form>
{% endblock auth_form %}